<template>
  <el-card>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="分类:">
        <el-select
          v-model="itemSort"
          placeholder="请选择分类"
          clearable
          style="width: 240px"
        >
          <el-option v-for="item in optionSort" :key="item.label"  :label="item.label" :value="item.value" />
    
        </el-select>
      </el-form-item>
      <el-form-item label="标签:">
        <el-select
          v-model="itemTag"
          placeholder="请选择标签"
          clearable
          style="width: 240px"
        >
          <el-option label="已用" value="已用" />
          <el-option label="未用" value="未用" />
          <el-option label="不可用" value="不可用" />
          <el-option label="闪退" value="闪退" />
          <el-option label="报废" value="报废" />
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="getTable">查看</el-button>
        <el-button type="success" @click="fileExport">导出标签</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-table :data="tableData" border  show-summary stripe style="width: 100%">
    <el-table-column prop="id" label="ID" width="100" />
    <el-table-column prop="sortName" label="分组名" width="380" />
    <el-table-column prop="count" sortable  label="总数量" />
    <el-table-column prop="count_used" sortable  label="已用" />
    <el-table-column prop="count_unused" sortable  label="未用" />
    <el-table-column prop="count_unusable" sortable  label="不可用" />
    <el-table-column prop="count_corrupted" sortable  label="闪退" />
    <el-table-column prop="count_scrap" sortable  label="报废" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup>
import { ref ,onMounted} from "vue";
import { getSortOption ,getFileList,exportFileData,deleteFile} from "../api/ViewFile";
import { ElMessage } from 'element-plus'
const itemSort = ref("");
const optionSort=ref([])
const itemTag=ref('')
const tableData=ref([])
const getSort=async()=>{
const response=await getSortOption()
if (response&&response.data) {
  optionSort.value=response.data.map((item)=>{
    return {
      label:item.grou_by,
      value:item.grou_by
    }
  })
  
}
}
const getTable=async ()=>{
if (!itemSort.value) {
  ElMessage({
    message: '请选择分类',
    type: 'error',
  })
  return
}
  const response=await getFileList(itemSort.value)
if (response&&response.data) {
  tableData.value=response.data.map((item,index)=>{
    return{
      ...item,
      id:index
    }
  })
}

}
const fileExport = async () => {
  if (!itemSort.value || !itemTag.value) {
    ElMessage({
      message: '请选择分类或者标签',
      type: 'error',
    });
    return;
  }

  try {
    const response = await exportFileData(itemSort.value, itemTag.value);
    // 如果 response 是一个 Blob，继续处理
    if (response instanceof Blob) {
      const url = URL.createObjectURL(response);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', '导出数据.xlsx');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } else {
      ElMessage({
        message: '文件导出失败，请重试',
        type: 'error',
      });
    }
  } catch (error) {
    console.error('下载文件时发生错误:', error);
    ElMessage({
      message: '下载文件时发生错误',
      type: 'error',
    });
  }
};

const handleDelete=async(index,row)=>{
const response=await deleteFile(itemSort.value,row.sortName)
ElMessage({
    message: response.message,
    type: 'success',
  })
  getTable()
}



onMounted(()=>{
  getSort()
 
})

</script>

<style lang="scss" scoped>
</style>